<template>
  <view>
    <u-image width="100%" height="400rpx" :src="src"></u-image>
    <view class="mainContainer">
      <news-list toPage="newsDetail" :newsList="list">
        <u-search
          placeholder="请输入标题"
          shape="round"
          :show-action="false"
          v-model="keyword"
          class="searchInput"
          @search="handleSearch"
        ></u-search>
      </news-list>
    </view>
    <!-- 返回页顶 -->
    <view>
      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </view>
  </view>
</template>
<script>
import newsList from "../news/newsList.vue";
import { newsSearch, newsListData } from "../../../common/api/news";
let that
export default {
  name: "HomeNewsList",
  components: {
    newsList,
  },
  data() {
    return {
      keyword: "",
      src:
        "https://img2.baidu.com/it/u=3209133658,2686675697&fm=26&fmt=auto&gp=0.jpg",
      page: 1, //初始页默认值为1
      totalPages: 0,  //总页数
      list: [],
      scrollTop: 0,
    };
  },
  onLoad() {
    that = this
  },
  onShow() {
    that.getdatalist()
  },
  methods: {
    getdatalist () {
      let Data = {
        page: that.page
      }
      newsListData(Data).then((res) => {
        // console.log('newListData----', res)
        that.totalPages = res.pages
        if (res.list.length > 0) {
          that.page = that.page + 1
          that.list = [...that.list, ...res.list];
        }
      })
    },
    handleSearch() {
      newsSearch({ name: this.keyword }).then((res) => {
        that.list = res;
      });
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onReachBottom() {
      //触底开始下一页
      if (that.page <= that.totalPages)
        that.getdatalist(); //重新调用请求获取下一页数据
    },
  },
};
</script>
<style lang="scss" scoped>
.topCoverImg {
  width: 100vw;
  height: 400rpx;
}
.searchInput {
  width: 100vw;
  padding: 0 20rpx;
  margin-bottom: 10rpx;
}
.mainContainer {
  width: 100vw;
  // border-radius: 30rpx 30rpx 0 0;
  // position: relative;
  // top: -30rpx;
  background: #ffffff;
  padding-top: 20rpx;
}
.wrap {
  height: 200vh;
}
</style>
